<template>
  <div>
        <!-- 搜索input -->
        <input type="text" v-model="searchtext">
        <!-- 下拉框 -->
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default dropdown-toggle"
                data-toggle="dropdown">{{pleaseselect}}</button>
            <ul class="dropdown-menu">
                <li v-for="(item,index) in copygoodslist" :key="index" @click="selectcontent(index)">
                    <a href="#">{{item.goods_brand}}</a>
                </li>
            </ul>
        </div>
        <!-- 搜索button -->
        <button type="button" class="btn btn-danger" @click="search">搜索</button>
        <!-- 表格 -->
        <table class="table table-hover">
            <thead>
                <tr>
                    <th><input type="checkbox" :checked="isCheckAll" @click="checkall"> 全选</th>
                    <th>照片</th>
                    <th>简介</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in goodslist" :key="index">
                    <th scope="row"><input type="checkbox" :checked="item.isChecked" @click="tocheck(index)">
                        {{index+1}} </th>
                    <th><img class="img-rounded" style="width: 100px;height: 100px;" :src="item.goods_small_logo"
                            alt=""></th>
                    <th>{{item.goods_name}}</th>
                    <th>￥:{{item.goods_price}}.00</th>
                    <th>
                        <button type="button" @click="add(index,-1)" class="glyphicon glyphicon-minus"
                            v-if="item.goods_number<=1" disabled="disabled"></button>
                        <button type="button" @click="add(index,-1)" class="glyphicon glyphicon-minus" v-else></button>
                        {{item.goods_number}}
                        <button type="button" @click="add(index,1)" class="glyphicon glyphicon-plus"></button>
                    </th>
                    <th>￥{{item.goods_price*item.goods_number}}</th>
                    <th><span @click="remove(index)" class="glyphicon glyphicon-trash">删除</span></th>
                </tr>
            </tbody>
        </table>
        <p>已选{{num}}商品；总计￥{{totalprice}}</p>
        <!-- 添加表单 -->
        <form class="form-inline">
            <div class="form-group">
                <label for="exampleInputEmail2">商品简介</label>
                <input type="text" class="form-control" id="exampleInputEmail2" v-model="addfrom.goods_name"
                    placeholder="商品简介">
            </div>
            <div class="form-group">
                <label for="exampleInputEmail2">价格</label>
                <input type="text" class="form-control" id="exampleInputEmail2" v-model="addfrom.goods_price"
                    placeholder="价格">
            </div>
            <div class="form-group">
                <label for="exampleInputEmail2">数量</label>
                <input type="text" class="form-control" id="exampleInputEmail2" v-model="addfrom.goods_number"
                    placeholder="数量">
            </div>
            <div class="form-group">
                <label for="exampleInputEmail2">照片链接</label>
                <input type="text" class="form-control" id="exampleInputEmail2" v-model="addfrom.goods_small_logo"
                    placeholder="照片链接">
            </div>
            <div class="form-group">
                <label for="exampleInputEmail2">品牌</label>
                <input type="text" class="form-control" id="exampleInputEmail2" v-model="addfrom.goods_brand"
                    placeholder="品牌">
            </div>
            <button type="button" @click="addshop" class="btn btn-default">添加</button>
        </form>
        <br /><br /><br />
    </div>
</template>

<script>
export default {
  data() {
    return {
      //商品列表
      goodslist: [
        {
          goods_id: 57332,
          cat_id: 998,
          goods_name:
            "400毫升 海鲜食品冷藏冰包 注水冰袋医用冰袋户外冷藏保鲜熟食冷藏反复使用（10个装）",
          goods_price: 14,
          goods_number: 1,
          goods_weight: 100,
          goods_big_logo:
            "http://image4.suning.cn/uimg/b2c/newcatentries/0070083251-000000000168369396_1_800x800.jpg",
          goods_small_logo:
            "http://image4.suning.cn/uimg/b2c/newcatentries/0070083251-000000000168369396_1_400x400.jpg",
          add_time: 1516662792,
          upd_time: 1516662792,
          hot_mumber: 0,
          isChecked: true,
          goods_brand: "海鲜"
        },
        {
          goods_id: 57444,
          cat_id: 9,
          goods_name:
            "创维（Skyworth）42X6 42英寸10核智能酷开网络平板液晶电视（黑色）",
          goods_price: 1899,
          goods_number: 1,
          goods_weight: 100,
          goods_big_logo:
            "http://image2.suning.cn/uimg/b2c/newcatentries/0070078057-000000000634917020_1_800x800.jpg",
          goods_small_logo:
            "http://image2.suning.cn/uimg/b2c/newcatentries/0070078057-000000000634917020_1_400x400.jpg",
          add_time: 1516663280,
          upd_time: 1516663280,
          hot_mumber: 0,
          isChecked: false,
          goods_brand: "海尔"
        },
        {
          goods_id: 57433,
          cat_id: 9,
          goods_name:
            "创维(skyworth) 55V8E 55英寸 4K超高清HDR纤薄全金属机身智能酷开网络液晶电视",
          goods_price: 3299,
          goods_number: 1,
          goods_weight: 100,
          goods_big_logo:
            "http://image3.suning.cn/uimg/b2c/newcatentries/0070078057-000000000153983248_1_800x800.jpg",
          goods_small_logo:
            "http://image3.suning.cn/uimg/b2c/newcatentries/0070078057-000000000153983248_1_400x400.jpg",
          add_time: 1516663242,
          upd_time: 1516663242,
          hot_mumber: 0,
          isChecked: false,
          goods_brand: "华为"
        },
        {
          goods_id: 57442,
          cat_id: 9,
          goods_name: "创维彩电40G6A",
          goods_price: 2999,
          goods_number: 1,
          goods_weight: 100,
          goods_big_logo:
            "http://image1.suning.cn/uimg/b2c/newcatentries/0000000000-000000000601395527_1_800x800.jpg",
          goods_small_logo:
            "http://image1.suning.cn/uimg/b2c/newcatentries/0000000000-000000000601395527_1_400x400.jpg",
          add_time: 1516663277,
          upd_time: 1516663277,
          hot_mumber: 0,
          isChecked: false,
          goods_brand: "TCL"
        },
        {
          goods_id: 57441,
          cat_id: 9,
          goods_name:
            "创维(Skyworth) G7 4K超高清彩电HDR 智能网络液晶平板电视(玫瑰金) 65G7 (65英寸)",
          goods_price: 9699,
          goods_number: 1,
          goods_weight: 100,
          goods_big_logo:
            "http://image2.suning.cn/uimg/b2c/newcatentries/0000000000-000000000168415104_1_800x800.jpg",
          goods_small_logo:
            "http://image2.suning.cn/uimg/b2c/newcatentries/0000000000-000000000168415104_1_400x400.jpg",
          add_time: 1516663273,
          upd_time: 1516663273,
          hot_mumber: 0,
          isChecked: false,
          goods_brand: "HDR"
        }
      ],
      isCheckAll: false,
      searchtext: "",
      pleaseselect: "请选择",
      //添加对象
      addfrom: {
        goods_number: 0,
        goods_name: "",
        goods_price: 0,
        goods_small_logo: "",
        isChecked: false,
        goods_brand: "家电"
      },
      copygoodslist: []
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.copygoodslist = this.goodslist;
  },
  methods: {
    //单选
    tocheck(index) {
      this.goodslist[index].isChecked = !this.goodslist[index].isChecked;
      //全选
      for (let item of this.goodslist) {
        if (item.isChecked == false) {
          this.isCheckAll = false;
          return;
        } else {
          this.isCheckAll = true;
        }
      }
    },
    //全选
    checkall() {
      this.isCheckAll = !this.isCheckAll;
      //console.log( this.isCheckAll)
      if (this.isCheckAll == true) {
        this.goodslist.forEach(v => (v.isChecked = true));
      }
      if (this.isCheckAll == false) {
        this.goodslist.forEach(v => (v.isChecked = false));
      }
    },
    //添加数量
    add(index, m) {
      this.goodslist[index].goods_number =
        m + this.goodslist[index].goods_number;
    },
    //删除
    remove(index) {
      //console.log(index)
      this.goodslist.splice(index, 1);
    },
    //search搜索
    search() {
      this.goodslist = this.copygoodslist;
      if (this.searchtext != "") {
        this.goodslist = this.goodslist.filter(v => {
          if (v.goods_name.indexOf(this.searchtext) != -1) {
            return v;
          }
        });
      }
      if (this.pleaseselect != "请选择") {
        this.goodslist = this.goodslist.filter(v => {
          if (v.goods_brand.indexOf(this.pleaseselect) != -1) {
            return v;
          }
        });
      }
      this.pleaseselect = "请选择";

      console.log(this.goodslist);
    },
    //selectcontent选择的内容
    selectcontent(index) {
      this.pleaseselect = this.copygoodslist[index].goods_brand;
    },
    //添加商品
    addshop() {
      //this.copygoodslist.push(this.addfrom)
      this.goodslist.push(this.addfrom);
      this.addfrom = {
        goods_number: 0,
        goods_name: "",
        goods_price: 0,
        goods_small_logo: "",
        isChecked: false,
        goods_brand: "家电"
      };
    }
    //
  },
  computed: {
    //被选的数量
    num() {
      let n = 0;
      this.goodslist.forEach(v => (v.isChecked === true ? n++ : n));
      return n;
    },
    //总价
    totalprice() {
      let n = 0;
      this.goodslist.forEach(
        v =>
          v.isChecked === true ? (n = n + v.goods_number * v.goods_price) : n
      );
      return n;
    }
  }
};
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>